const template = document.createElement("template");

template.innerHTML = /*html*/ `
<style>
        :host {
          --h: 10px;
          padding: 0 10px !important;
          display: block;
          width: 100%;
        }

        * {
          box-sizing: border-box;
        }

        .slider-box {
          width: 100%;
          padding: calc((var(--h) + 15px) / 2) 0;
        }

        .slider-bg {
          position: relative;
          width: 100%;
          height: var(--h);
          background-color: #e4e7ed;
          border-radius: calc(var(--h) / 2);
        }

        .slider-bg-active {
          width: 0;
          height: 100%;
          border-radius: calc(var(--h) / 2);
          background-color: rgb(107, 44, 255);
        }

        .slider {
          position: absolute;
          width: calc(var(--h) + 10px);
          height: calc(var(--h) + 10px);
          top: -5px;
          left: 0;
          transform: translateX(-50%);
          user-select: none;
        }

        .slider::before {
          display: block;
          position: absolute;
          content: "";
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          margin: auto;
          width: calc(var(--h) + 2px);
          height: calc(var(--h) + 2px);
          border: calc(var(--h) / 5) solid rgb(107, 44, 255);
          border-radius: 50%;
          background-color: #fff;
        }

        .slider:hover {
          transform: translateX(-50%) scale(1.2);
          transition: all 0.2s ease-in-out;
          cursor: grab;
        }

        .slider:hover .slider-text{
          display: block;
          transform: scale(0.8);
        }

        .slider .slider-text{
          position: absolute;
          top: -30px;
          left: calc(-12.5px + (var(--h) + 10px) / 2);
          width: 25px;
          height: 25px;
          background-color: #303133;
          color: #fff;
          border-radius: 3px;
          text-align: center;
          line-height: 25px;
          display: none;
        }

        .slider .slider-text::before{
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 5px solid #303133;
          transform: rotate(90deg);
          bottom: -7px;
          left: calc(50% - 2.5px);

        }

        .active {
          cursor: grabbing;
        }

        .active .slider {
          transform: translateX(-50%) scale(1.2);
        }

        .active .slider-text{
          display: block;
          transform: scale(0.8);
        }

        .active .slider:hover {
          cursor: grabbing;
        }
      </style>

      <div class="slider-box">
        <div class="slider-bg">
          <div class="slider-bg-active"></div>
          <div class="slider">
            <div class="slider-text">0</div>
          </div>
        </div>
      </div>
`;

export default class LiuSlider extends HTMLElement {
  static observedAttributes = ["value", 'h'];
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: "closed" });
    const content = template.content.cloneNode(true);
    let isdown = false;
    this.$slider = content.querySelector(".slider");
    // let sliderBg = content.querySelector(".slider-bg");
    this.$sliderBgActive = content.querySelector(".slider-bg-active");
    let sliderBox = content.querySelector(".slider-box");
    this.$sliderText = content.querySelector(".slider-text");
    const percentage = (value) => {
      let percentage = sliderBox.clientWidth / 100;
      let offset = value / percentage;
      offset = Math.round(offset) ;
      if(offset > 100){
        offset = 100;
      }else if(offset < 0){
        offset = 0
      }

      this.$sliderBgActive.style.width = `${offset}%`;
      this.$slider.style.left = `${offset}%`;
      if(this.value != offset){
        this.$sliderText.innerText = offset;
        this.dispatchEvent(
          new CustomEvent("change", {
            detail: {
              value: offset,
            },
          })
        );

        this.value = offset;
      }

      this.onclick = (e) => e.stopPropagation();

    };

    const move = (e, start, tag) => {
      e.stopPropagation();
      if (!isdown) return;
      let value = tag + (e.clientX - start);
      // if(value)
      percentage(value);
    };

    const up = (e) => {
      e.stopPropagation();
      document.removeEventListener("mousemove", move);
      document.removeEventListener("mouseup", up);
      sliderBox.classList.remove("active");
      isdown = false;
      // percentage(e.clientX);
    };

    this.$slider.addEventListener("mousedown", function (event) {
      event.stopPropagation();
      let start = event.clientX,
        tag = this.offsetLeft;
      sliderBox.classList.add("active");
      isdown = true;
      document.addEventListener("mousemove", (event) =>
        move(event, start, tag)
      );
      document.addEventListener("mouseup", up);
    });

    sliderBox.addEventListener("mousedown", function (event) {
      event.stopPropagation();
      if (event.button == 0) {
        percentage(event.offsetX);
      }
    });

    shadow.appendChild(content);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "value") {
      this.value = newValue;
      this.$sliderBgActive.style.width = `${newValue}%`;
      this.$slider.style.left = `${newValue}%`;
      this.$sliderText.innerText = newValue;
    }else if(name === 'h'){
      this.style.setProperty("--h", newValue + 'px')
    }
  }
}
